
<template>
  <section>
    <el-card>
      <el-row>
        <el-col :span="12">
          <div id="areaTop5" style="height: 300px"></div>
        </el-col>
        <el-col :span="12">
          <div id="categoryTop5" style="height: 300px"></div>
        </el-col>
      </el-row>
    </el-card>
  </section>
</template>

<script>
  export default {
    name: "staticData",
    data() {
      return {
        curTime: "",
        articleList: [],
        percent1: 30,
        percent2: 70,
        year: "2018-10-20",
        time: "10:05:03"
      }
    },
    mounted() {
      this.getDeptData()
      this.getCategoryData()
    },
    methods: {
      // 获取栏目统计
      getDeptData() {
         this.API.ColumnCountUsingPOST({reportDto: {}}).then(res=>{
           this.drawCategoryLine(res.data)
         })
      },
      // 获取分类统计
      getCategoryData() {
        this.API.deptCountUsingPOST({reportDto: {}}).then(res=>{
          let tem = []
            if(res.data){
               for (let i=0;i<res.data.length;i++){
                 if (i<5){
                   tem.push(res.data[i])
                 }
              }
            }
          this.drawLine(tem)
        })
      },
      drawLine(data) {
        // var i=0;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("areaTop5"));
        var color = ["#19D672", "#FD517D"];
        let title = []
        let serData = []
        if (data){
          data.map((item)=>{
            title.push(item.name)
            serData.push(item.countNum)
          })
        }
        // 绘制图表
        myChart.setOption({
          title: {
            text: '数据统计（部门TOP5）'
          },
          tooltip: {},
          xAxis: {
            data: title
          },
          yAxis: {},
          series: [{
            name: '发文量',
            type: 'bar',
            barWidth: '20px',
            data: serData
          }]
        });
      },
      drawCategoryLine(data) {
        // var i=0;
        // 基于准备好的dom，初始化echarts实例
        let myChart = this.$echarts.init(document.getElementById("categoryTop5"));
        var color = ["#19D672", "#FD517D"];
        let title = []
        let serData = []
        if (data){
          data.map((item)=>{
            title.push(item.name)
            serData.push(item.countNum)
          })
        }
        // 绘制图表
        myChart.setOption({
          title: {
            text: '数据统计（分类TOP5）'
          },
          tooltip: {},
          xAxis: {
            data: title
          },
          yAxis: {},
          series: [{
            name: '发文量',
            type: 'bar',
             barWidth: '20px',
            data: serData
          }]
        });
      }
    },
    components: {
    }
  }
</script>

<style scoped>

</style>
